<template>
  <div>
    <div class="footer">
      <div class="home" @click="home()">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ionicon"
          viewBox="0 0 512 512"
        >
          <path
            d="M480 173.59c0-104.13-68.26-134.65-68.26-134.65C377.3 23.15 318.2 16.5 256.8 16h-1.51c-61.4.5-120.46 7.15-154.88 22.94 0 0-68.27 30.52-68.27 134.65 0 23.85-.46 52.35.29 82.59C34.91 358 51.11 458.37 145.32 483.29c43.43 11.49 80.73 13.89 110.76 12.24 54.47-3 85-19.42 85-19.42l-1.79-39.5s-38.93 12.27-82.64 10.77c-43.31-1.48-89-4.67-96-57.81a108.44 108.44 0 01-1-14.9 558.91 558.91 0 0096.39 12.85c32.95 1.51 63.84-1.93 95.22-5.67 60.18-7.18 112.58-44.24 119.16-78.09 10.42-53.34 9.58-130.17 9.58-130.17zm-80.54 134.16h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24 0-36.06 15.53-36.06 46.24v67h-49.66v-67c0-30.71-12-46.24-36.06-46.24-21.72 0-32.58 13.09-32.58 38.89v122.37h-50V181.67q0-38.65 19.75-61.39c13.6-15.15 31.4-22.92 53.51-22.92 25.58 0 44.95 9.82 57.75 29.48L256 147.69l12.45-20.85c12.81-19.66 32.17-29.48 57.75-29.48 22.11 0 39.91 7.77 53.51 22.92q19.79 22.72 19.75 61.39z"
          />
        </svg>
      </div>
      <div class="licai" @click="paypack()">
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="ionicon"
            viewBox="0 0 512 512"
          >
            <rect
              x="48"
              y="144"
              width="416"
              height="288"
              rx="48"
              ry="48"
              fill="none"
              stroke="currentColor"
              stroke-linejoin="round"
              stroke-width="32"
            />
            <path
              d="M411.36 144v-30A50 50 0 00352 64.9L88.64 109.85A50 50 0 0048 159v49"
              fill="none"
              stroke="currentColor"
              stroke-linejoin="round"
              stroke-width="32"
            />
            <path d="M368 320a32 32 0 1132-32 32 32 0 01-32 32z" />
          </svg>
        </div>
        <div style="font-size: 14px">钱包</div>
      </div>
      <div class="xiaoxi" @click="message()">
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="ionicon"
            viewBox="0 0 512 512"
          >
            <path
              d="M87.48 380c1.2-4.38-1.43-10.47-3.94-14.86a42.63 42.63 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.64 139.09 140.72 48 255.82 48 356.2 48 440 117.54 459.57 209.85a199 199 0 014.43 41.64c0 112.41-89.49 204.93-204.59 204.93-18.31 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.14 31.14 0 00-11.13-2.07 30.7 30.7 0 00-12.08 2.43L81.5 462.78a15.92 15.92 0 01-4.66 1.22 9.61 9.61 0 01-9.58-9.74 15.85 15.85 0 01.6-3.29z"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-miterlimit="10"
              stroke-width="32"
            />
            <circle cx="160" cy="256" r="32" />
            <circle cx="256" cy="256" r="32" />
            <circle cx="352" cy="256" r="32" />
          </svg>
        </div>
        <div style="font-size: 14px">消息</div>
      </div>
      <div class="wode" @click="wode()">
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="ionicon"
            viewBox="0 0 512 512"
          >
            <path
              d="M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="32"
            />
            <path
              d="M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z"
              fill="none"
              stroke="currentColor"
              stroke-miterlimit="10"
              stroke-width="32"
            />
          </svg>
        </div>
        <div style="font-size: 14px">我的</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ToolBar",
  methods: {
    home() {
      this.$router.push("/");
    },
    paypack(){
      this.$router.push("/paypack");
    },
    message(){
      this.$router.push("/message");
    },
    wode() {
      this.$router.push("/personal");
    },
  },
};
</script>
<style scoped>
/* 底部工具栏 */
.footer {
  position: fixed;
  bottom: 0;
  height: 70px;
  z-index: 999;
  background-color: #fafbff;
  width: 100%;
  border-top: solid 1px #e1e1e3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.footer > div {
  width: 25%;
  text-align: center;
}

.home {
  height: 70px;
  line-height: 70px;
  margin-top: 10px;
}

.home svg {
  width: 50px;
  height: 50px;
  fill: #1678ff;
}

.licai > div:first-child {
  margin-top: 10px;
}

.licai > div {
  line-height: 20px;
}

.licai svg {
  width: 30px;
  height: 30px;
}

.xiaoxi > div:first-child {
  margin-top: 10px;
}

.xiaoxi > div {
  line-height: 20px;
}

.xiaoxi svg {
  width: 30px;
  height: 30px;
}

.wode > div:first-child {
  margin-top: 10px;
}

.wode > div {
  line-height: 20px;
}

.wode svg {
  width: 30px;
  height: 30px;
}
</style>